<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类伪元素</title>
</head>

<style>
  .q-cell {
    margin-top: 50px;
  }

.border {
  position: relative;
}

.border::after {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 16px;
  bottom: 0;
  left: 16px;
  border-bottom: 5px solid pink;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
}
</style>
<body>
  <ol>
    <li>伪类使用单冒号，而伪元素使用双冒号。如 :hover 是伪类，::before 是伪元素</li>
    <li>伪元素会在文档流生成一个新的元素，并且可以使用 content 属性设置内容, 经常使用场景 添加的下边框</li>

    <div class="q-cell border" >
      看我的下划线
    </div>
  </ol>
</body>
</html>